<template>
  <div class="app-container calendar-list-container">
    <div class="apply-query">
      <el-row class="filter-query">
        <el-col><span>{{ $t("projectProcess.add.queryCriteria")}}</span></el-col>
      </el-row>
      <el-form :inline="true" style="padding: 0 20px">
        <el-row>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{ $t("projectProcess.add.templateName")}}</div>
              <el-input @keyup.enter.native="handleFilter" v-model="listQuery.templateName" :placeholder="$t('placeholder.name')" clearable class="filter-item"></el-input>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{ $t("projectProcess.add.systemType")}}</div>
              <dict-select v-model="listQuery.systemType" code="systemType" :clearable="true"></dict-select>
            </div>
          </el-col>
          <!--<el-col :span="4" style="margin-top: 45px;">-->
            <!--<div class="yt-btn yt-btn-ys" type="primary">{{ $t("button.search") }}</div>-->
            <!--<div class="yt-btn yt-ml8" type="primary">{{ $t("button.reset") }}</div>-->
          <!--</el-col>-->
        </el-row>
      </el-form>
    </div>

    <div class="yt-data-list">
      <div class="yt-list-title">
        <span>{{ $t("projectProcess.add.templateList")}}</span>
      </div>
      <div class="yt-list-content">
        <div class="list-operation">
          <!--编辑-->
          <div class="yt-btn yt-btn-ys" type="primary" @click="addTemplate()">{{ $t("projectProcess.add.newTemplate")}}</div>
          <!--保存-->
          <div class="yt-btn yt-ml8" type="primary" @click="saveTemplate()">{{ $t("button.preserve")}}</div>
        </div>
        <el-table class="yt-table yt-temporary" :key="tableKey" :data="list" fit highlight-current-row @selection-change="handleSelectionChange" max-height="600">
          <el-table-column align="center" type="selection" width="55"/>
          <el-table-column align="center" type="index" :label="$t('projectProcess.index.serialNumber')" width="50"/>
          <el-table-column align="center" :label="$t('projectProcess.add.blockSeq')">
            <template slot-scope="scope">
              <el-input v-model="scope.row.blockSeq" :placeholder="$t('projectProcess.add.placeholder.blockSeq')"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('projectProcess.add.blockName')">
            <template slot-scope="scope">
              <el-select v-model="scope.row.blockCode" clearable filterable :placeholder="$t('placeholder.choose')" @change="setBlock(scope.$index, $event)">
                <el-option v-for="item in items" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('projectProcess.add.mustFill')">
            <template slot-scope="scope">
              <el-select v-model="scope.row.mustFill" :placeholder="$t('placeholder.choose')">
                <el-option :label="$t('tips.yes')" value="1"></el-option>
                <el-option :label="$t('tips.no')" value="0"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('projectProcess.add.type')">
            <template slot-scope="scope">
              <el-select v-model="scope.row.type" :placeholder="$t('placeholder.choose')">
                <el-option v-for="item in belongsToCategoryList" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('projectProcess.add.operate')">
            <template slot-scope="scope">
              <div class="yt-btn" type="primary" @click="handlePreserve(scope.row, scope.$index)">{{ $t("button.delete")}}</div>
            </template>
          </el-table-column>
        </el-table>
        <div style="height: 20px;"></div>
      </div>
    </div>

  </div>
</template>

<script>
  import {
    submit,
    queryByTemplateId,
    deleteByIds
  } from '@/api/e-formula/projectProcess';

  export default {
    name: 'index',
    components: {
      'dict-select': () => import('@/components/Dict/dictValueSelect')
    },
    data() {
      return {
        id: '',
        items: [],
        dictDialogVisible: false,
        indexSum: [],
        map: {},
        tableKey: 0,
        config: Config.I18n,
        list: [
          {
            blockSeq: '',
            blockCode: '',
            blockType: '',
            mustFill: '',
            type: ''
          }
        ],
        dialogForm: {
          blockSeq: '',
          blockType: '',
          mustFill: '',
          systemType: ''
        },
        selectionList: [],
        fieldNameList: [], // 栏位名称列表
        belongsToCategoryList: [
          {
            label: this.$t(
              'projectProcess.add.belongsToCategoryList.projectData'
            ),
            value: '0'
          },
          {
            label: this.$t('projectProcess.add.belongsToCategoryList.contract'),
            value: '1'
          },
          {
            label: this.$t('projectProcess.add.belongsToCategoryList.project'),
            value: '2'
          }
        ], // 所属大类列表
        total: null,
        listLoading: true,
        listQuery: {
          templateName: '',
          systemType: ''
        }
      };
    },
    mounted() {
      if (this.$route.query.id !== '123') {
        this.id = this.$route.query.id;
      }

      this.items = this.$store.getters.allDic.nameColumn
      console.log(JSON.stringify(this.items))

      if (this.id) {
        this.getlist();
      }
    },
    methods: {
      setBlock(index, code) {
        this.items.forEach(x => {
          if (x.value === code) {
            console.log(x.remark)
            this.list[index].blockType = x.remark
          }
        });
      },
      getlist() {
        const data = {
          templateId: this.id
        };
        console.log(data);
        queryByTemplateId(data).then(res => {
          console.log(res.data.template, '111111111111');
          this.listQuery = res.data.template;
          this.list = res.data.list;
          // this.list = response.data.data.rows;
          // this.listLoading = false;
        });
      },
      handleSelectionChange(val) {
        //  表格序号选中函数
        this.selectionList = val;
      },
      saveTemplate() {
        this.indexSum = [];
        // console.log(this.listQuery)
        if (this.listQuery.templateName === '') {
          this.$notify({
            title: this.$t('projectProcess.add.tips.fail'),
            message: this.$t('projectProcess.add.tips.templateName'),
            type: 'warning'
          });
          return false;
        }
        if (this.listQuery.systemType === '') {
          this.$notify({
            title: this.$t('projectProcess.add.tips.fail'),
            message: this.$t('projectProcess.add.tips.systemType'),
            type: 'warning'
          });
          return false;
        }
        for (let index = 0; index < this.list.length; index++) {
          this.indexSum.push(this.list[index].blockSeq);
          if (this.list[index].blockSeq === '') {
            this.$notify({
              title: this.$t('projectProcess.add.tips.fail'),
              message: this.$t('projectProcess.add.tips.content'),
              type: 'warning'
            });
            return false;
          }
          if (this.list[index].blockCode === '') {
            this.$notify({
              title: this.$t('projectProcess.add.tips.fail'),
              message: this.$t('projectProcess.add.tips.content'),
              type: 'warning'
            });
            return false;
          }
          if (this.list[index].mustFill === '') {
            this.$notify({
              title: this.$t('projectProcess.add.tips.fail'),
              message: this.$t('projectProcess.add.tips.content'),
              type: 'warning'
            });
            return false;
          }
          if (this.list[index].type === '') {
            this.$notify({
              title: this.$t('projectProcess.add.tips.fail'),
              message: this.$t('projectProcess.add.tips.content'),
              type: 'warning'
            });
            return false;
          }
        }
        if (new Set(this.indexSum).size !== this.indexSum.length) {
          this.$notify({
            title: this.$t('projectProcess.add.tips.fail'),
            message: this.$t('projectProcess.add.tips.sameOrder'),
            type: 'warning'
          });
          return false;
        }
        const data = {
          list: this.list,
          template: this.listQuery
        };
        console.log(data, '没有元素');
        submit(data).then(res => {
          this.$notify({
            title:
              res.status === 200
                ? this.$t('projectProcess.add.tips.success')
                : this.$t('projectProcess.add.tips.fail'),
            message: res.data || res.message,
            type: res.status === 200 ? 'success' : 'warning'
          });
          if (this.listQuery.id) {
            this.getlist();
          } else {
            this.$router.push('/baseManager/projectProcess');
          }
        });
      },
      handlePreserve(listTo, index) {
        if (this.list.length > 1) {
          if (listTo.id) {
            const Ids = [];
            Ids.push(listTo.id);

            console.log(Ids, 'Ids');
            deleteByIds(Ids).then(res => {
              console.log(res);
              this.getlist();
            });
            console.log(listTo, index);
          } else {
            this.list.splice(index, 1);
          }
        } else {
          this.$notify({
            title: this.$t('projectProcess.add.tips.fail'),
            message: this.$t('projectProcess.add.tips.atLeastKeep'),
            type: 'warning'
          });
        }
      },
      addTemplate() {
        this.list.push({
          blockSeq: '',
          blockCode: '',
          blockType: '',
          mustFill: '',
          systemType: ''
        });
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
      },
      handleFilter() {
        this.getList();
      },
      reset() {
        this.listQuery = {};
        this.getList();
      }
    }
  };
</script>
